<!--<!doctype html>-->
<!--<html lang="zh-CN">-->
<!--  <head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<!--    <meta name="description" content="">-->
<!--    <title></title>-->
<!--&lt;!&ndash;    <script src="/static/js/jquery-1.10.1-min.js"></script>&ndash;&gt;-->
<!--    <script src="/static/js/jquery-3.6.0.min.js" ></script>-->
<!--    <script src="/static/js/jquery.form.min.js"></script>-->



<!--    &lt;!&ndash; Bootstrap core CSS &ndash;&gt;-->
<!--<link href="/static/css/bootstrap.min.css" rel="stylesheet">-->

<!--    <style>-->
<!--      .bd-placeholder-img {-->
<!--        font-size: 1.125rem;-->
<!--        text-anchor: middle;-->
<!--        -webkit-user-select: none;-->
<!--        -moz-user-select: none;-->
<!--        -ms-user-select: none;-->
<!--        user-select: none;-->
<!--      }-->

<!--      @media (min-width: 768px) {-->
<!--        .bd-placeholder-img-lg {-->
<!--          font-size: 3.5rem;-->
<!--        }-->
<!--      }-->
<!--    </style>-->


<!--    &lt;!&ndash; Custom styles for this template &ndash;&gt;-->
<!--    <link href="/static/css/signin.css" rel="stylesheet">-->
<!--  </head>-->
<!--  <body class="text-center">-->

<!--<form class="form-signin" action="do" method="post">-->
<!--  <h1>个人博客系统</h1>-->
<!--  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>-->
<!--  <label for="inputPhone" class="sr-only">phone</label>-->
<!--  <input name="phone" type="phone" id="inputPhone" class="form-control" placeholder="phone" required autofocus>-->
<!--  <label for="inputPassword" class="sr-only">Password</label>-->
<!--  <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>-->
<!--  <label for="inputCaptcha" class="sr-only">Captcha</label>-->
<!--  <input name="captcha" type="captcha" id="inputCaptcha" class="form-control" placeholder="Captcha" required>-->
<!--  <img id="captcha" src=""/>-->
<!--  <input id="changeCaptcha" type="button" class="btn btn-info" value="Can't verify, change it."></input>-->
<!--  <div class="checkbox mb-3">-->
<!--    <label>-->
<!--      <input type="checkbox" value="remember-me"> Remember me-->
<!--    </label>-->
<!--  </div>-->
<!--  <button id="login" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>-->
<!--  <p class="mt-5 mb-3 text-muted">&copy; 2017-2021</p>-->
<!--</form>-->


<!--  <script>-->
<!--    let url = "/blogo/base/captcha";-->
<!--    let captchaId, picPath;-->
<!--    $.get(url, function (res) {-->
<!--      captchaId = res.data.captchaId;-->
<!--      picPath = res.data.picPath;-->
<!--      $("#captcha").attr({src: res.data.picPath});-->
<!--    })-->

<!--    $("#changeCaptcha").click(() => {-->
<!--      $.get(url, function (res) {-->
<!--        captchaId = res.data.captchaId;-->
<!--        picPath = res.data.picPath;-->
<!--        $("#captcha").attr({src: res.data.picPath});-->
<!--      })-->
<!--    })-->

<!--  </script>-->

<!--  <script src="/static/js/login.js">-->

<!--  </script>-->

<!--  </body>-->
<!--</html>-->

<!-- 上面是之前的版本，用 bootstrap 和 jquery 编写的> -->
{{define "template/login.html"}}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
<!--     import CSS-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>


</head>

<body style="background-image: url('/static/images/7630.jpg_wh300 (1).jpg')">
<div id="app" style="width: 600px;margin:200px auto">
  <el-card>
    <div slot="header" class="clearfix">
      <el-page-header @back="goBack" content="登录页面"></el-page-header>
    </div>

    <el-row><el-col :span='5' offset='6'>
      <img src="/static/images/logo.png" style="width: 100px;"></img>
    </el-col>
      <el-col :span='6'><span><h1 style="margin: 14px 0px;">BLOGO</h1></span></el-col>

    </el-row>


    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="用户名" prop="username">
        <el-input v-model.number="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-row style="width: 500px;">
          <el-col :span='12'><el-input v-model="ruleForm.captcha"></el-input></el-col>
          <el-col :span='12'><el-image :src="picPath" style="height: 40px;"></el-image><el-link @click="getCaptcha" type="primary">看不清，换一张</el-link></el-col>

        </el-row>

      </el-form-item>
      <el-form-item>

        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</body>
<!-- <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> -->
<!-- import Vue before Element -->
<script src="/static/js/Vue.js"></script>
<!-- import JavaScript -->
<script src="/static/js/index.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>
  var validateUsername = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('用户名不能为空'))
    }
    if (!Number.isInteger(value)) {
      return callback(new Error('请输入数字'))
    }

    if (String(value).length != 11) {
      return callback(new Error('手机号必须为 11 位'))
    }
    return callback()
  };
  var checkCaptcha = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('验证码不能为空'));
    }

    callback()
  };
  var validatePass = function (rule, value, callback) {
    if (value === '') {
      callback(new Error('请输入密码'));
    } else {
      if (Main.ruleForm.checkPass !== '') {
        Main.$refs.ruleForm.validateField('checkPass');
      }
      callback();
    }
  };
  var validatePass2 = function (rule, value, callback) {
    if (value === '') {
      callback(new Error('请再次输入密码'));
    } else if (value !== Main.ruleForm.pass) {
      callback(new Error('两次输入密码不一致'));
    } else {
      callback();
    }
  };

  var Main = new Vue({
    el: "#app",
    delimiters: ['${', '}'],
    data: {
      picPath:"",
      captchaId: "",
      ruleForm: {
        username: '',
        pass: '',
        checkPass: '',
        captcha: ''
      },
      token:'',
      rules: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        captcha: [
          { validator: checkCaptcha, trigger: 'blur' }
        ]
      }
    },
    methods: {
      submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            let getCaptcha = this.getCaptcha
            let error = this.$message.error
            let success = this.$message.success
            $.ajax({
              url:`/blogo/login/do`,
              url: `/blogo/login/do?username=${this.ruleForm.username}&password=${this.ruleForm.pass}&captcha=${this.ruleForm.captcha}&captchaId=${this.captchaId}`,
              type: "post",
              contentType: "application/json",
              datatype: "json",
              async:false,
              StatusCode:{
                400: function (){
                  alert("验证码错误")
                },
                401:function (){
                  alert("用户未注册")
                }
              },
              // data:{
              //   username: this.ruleForm.username,
              //   password: this.ruleForm.pass,
              //   captcha: this.ruleForm.captcha,
              //   captcha_id: this.ruleForm.captchaId,
              // },
              success:(res)=>{
                if(res !== null && res.code === 200){
                  success("登录成功 :)")
                  setTimeout(()=>{
                    localStorage.setItem("token", res.data.token)

                    location.href=`/blogo/dashboard/page?token=${res.data.token}`
                  }, 1500)
-``
                }else if(res !== null && res.code === 400){
                  getCaptcha()
                  error(res.msg)
                }else {
                  error(res.msg)
                }

              }
            })

          } else {
            console.log('error submit');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getCaptcha(){
        let picPath, captchaId
        $.ajax({
          url:"/blogo/base/captcha",
          type: "get",
          datatype: "json",
          async:false,
          success: function(res) {
            if(res !== null && res.code === 200){
              picPath = res.data.picPath
              captchaId = res.data.captchaId
            }
          }

        })
        this.picPath = picPath
        this.captchaId = captchaId
      },
      goBack(){
        window.location.href="/blogo/blog/page"
      }
    },
    created:function() {
      this.getCaptcha()
    }


  })
</script>

</html>

{{end}}